<script setup lang="ts">
import { doGetIcOrderList } from '@/apis/order/sameCityOrder'
import { IcOrder, IcOrderPageParams, IcOrderTimes } from '@/apis/order/sameCityOrder/types'
import computedTime from '@/utils/computedTime'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import QTimeLine from '@/basePackage/pages/deliveryOrder/components/QTimeLine/index.vue'
import QTimeLineItem from '@/basePackage/pages/deliveryOrder/components/QTimeLineItem/index.vue'
import TipsView from '@/basePackage/pages/deliveryOrder/components/TipsView/TipsView.vue'

const orderItem = ref<IcOrder>()
const status = ref<IcOrderPageParams['status']>('DELIVERED')
onLoad((option) => {
    status.value = option?.status
    if (option?.id) {
        getDetail(option.id)
    } else {
        uni.showToast({
            title: '订单不存在',
            icon: 'none',
        })
        setTimeout(() => {
            uni.navigateTo({
                url: '/basePackage/pages/deliveryOrder/index?back=true',
            })
        }, 2000)
    }
})

const getDetail = async (id: string) => {
    const { data } = await doGetIcOrderList({
        status: status.value,
        icNos: [id],
    })
    if (data) {
        orderItem.value = data.records[0]
    }
}

const totalGoodsNum = computed(() => {
    return orderItem.value?.skus?.reduce((total, item) => {
        return total + item.num
    }, 0)
})
const callPhone = () => {
    uni.makePhoneCall({
        phoneNumber: orderItem.value!.receiver.mobile,
    })
}
type TimeBy = {
    by: keyof IcOrderTimes
    title: string
    content: string
    isCurrent?: boolean // 是否进行到当前这一步
    isLast?: boolean // 是否是最后一步
}
const timeByList: TimeBy[] = [
    { by: 'errorTime', title: '配送异常', content: '', isCurrent: false },
    { by: 'deliveredTime', title: '已送达', content: '商品已送达', isCurrent: false },
    { by: 'pickupTime', title: '配送中', content: '骑手正在送货', isCurrent: false },
    { by: 'arrivalShopTime', title: '待取货', content: '骑手正在店内取货', isCurrent: false },
    { by: 'takeOrderTime', title: '待到店', content: '骑手正赶往商家', isCurrent: false },
    { by: 'shippingTime', title: '待接单', content: '等待骑手接单', isCurrent: false },
]
const times = computed(() => {
    const orderTimes = orderItem.value!.times
    let arr = timeByList
        .filter((item) => !!orderTimes[item.by])
        .map((item) => {
            return {
                ...item,
                content: item.by === 'errorTime' ? orderItem.value.statusDesc : item.content,
                time: orderTimes[item.by]!,
            }
        })
    arr[arr.length - 1].isLast = true
    arr[0].isCurrent = true
    return arr
})
</script>

<template>
    <div class="all_container">
        <div class="title_tips">订单已送达</div>
        <view v-if="orderItem?.receiver" class="popup_container">
            <view class="top fcenter">
                <view class="top_left fdc">
                    <view class="top_left_number">{{ orderItem.pickupCode }}</view>
                    <view class="order_no"
                        >订单编号：<text style="color: #555cfd">{{ orderItem.orderNo }}</text></view
                    >
                </view>
            </view>
            <view class="dot_line"></view>
            <view class="center fcenter">
                <view class="center_left fdc">
                    <view class="cust_name fcenter">
                        {{ orderItem.receiver.name }}
                        尾号<text style="color: #555cfd">{{ orderItem.receiver.mobile.slice(-4) }}</text>
                        <view v-if="orderItem.receiver.mobile" class="phone_icon" @click.stop="callPhone">
                            <u-icon name="bodadianhua" customPrefix="icon" color="rgb(85, 92, 253)" size="40rpx"></u-icon>
                        </view>
                    </view>
                    <view class="fcenter" style="margin-bottom: 18rpx">
                        <view class="title">{{ orderItem.receiver.address?.split('~')[1] || '' }}</view>
                    </view>
                    <view class="desc"
                        >{{ orderItem.receiver.address?.split('~')[0] || '' }}{{ orderItem.receiver.address?.split('~')[2] || '' }}</view
                    >
                </view>
            </view>
            <view class="dot_line"></view>
            <view class="bottom">
                <view class="fcenter title">
                    商品
                    <view class="mla">共{{ totalGoodsNum }}件</view>
                </view>
                <view class="goods_list">
                    <view v-for="(item, index) in orderItem.skus" :key="index" class="goods_item">
                        <view class="goods_name">{{ item.productName }}</view>
                        <view class="goods_num">x{{ item.num }}</view>
                    </view>
                </view>
                <view v-if="orderItem.remark" class="tips">
                    <TipsView :tips="orderItem.remark"></TipsView>
                </view>
            </view>
            <view class="dot_line"></view>
            <div class="other">
                <div class="delivery_personnel">配送员：{{ orderItem?.courier?.name }}</div>
                <div class="fcenter">
                    <div class="pickup_code">取货号：{{ orderItem.pickupCode }}</div>
                    <div class="pickup_code mla">配送时长：{{ computedTime(orderItem?.deliverSeconds || 0) }}</div>
                </div>
                <QTimeLine>
                    <QTimeLineItem v-for="it in times" :key="it.time" :data="it" curColor="#555cfd"> </QTimeLineItem>
                </QTimeLine>
            </div>
        </view>
    </div>
</template>

<style lang="scss" scoped>
.all_container {
    padding-left: 24rpx;
    padding-right: 24rpx;
    .title_tips {
        color: rgb(51, 51, 51);
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 46rpx;
        margin-left: 16rpx;
    }
    .popup_container {
        position: relative;
        padding-top: 40rpx;
        padding-left: 40rpx;
        padding-right: 40rpx;
        padding-bottom: 100rpx;
        display: flex;
        flex-direction: column;
        border-radius: 24rpx;
        background: rgb(255, 255, 255);

        .dot_line {
            border: 1px dashed rgb(153, 153, 153);
            opacity: 0.26;
            margin-top: 38rpx;
            margin-bottom: 34rpx;
        }
        .top {
            .top_left {
                .top_left_number {
                    color: rgb(51, 51, 51);
                    font-size: 60rpx;
                    font-weight: bold;
                    margin-bottom: 18rpx;
                }
                .top_left_time {
                    color: #333333;
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }
        }
        .center {
            .center_left {
                color: rgb(51, 51, 51);
                font-size: 28rpx;

                .cust_name {
                    margin-bottom: 22rpx;
                    .phone_icon {
                        margin-left: 10rpx;
                    }
                }
                .title {
                    font-weight: bold;
                    margin-right: 10rpx;
                }

                .desc {
                    color: rgb(51, 51, 51);
                    font-size: 26rpx;
                }
            }
        }
        .bottom {
            .title {
                color: rgb(51, 51, 51);
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 38rpx;
            }
            .goods_list {
                display: flex;
                flex-direction: column;
                margin-bottom: 20rpx;
                .goods_item {
                    width: 100%;
                    color: rgb(153, 153, 153);
                    font-size: 28rpx;
                    display: flex;
                    align-items: center;
                    margin-bottom: 20rpx;
                    .goods_name {
                        width: 0;
                        flex: 1;
                        // 一行展示溢出隐藏
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        margin-right: 126rpx;
                    }
                }
            }
            .tips {
                color: rgb(51, 51, 51);
                font-size: 28rpx;
                font-weight: bold;
            }
        }
        .other {
            color: rgb(51, 51, 51);
            font-size: 28rpx;
            display: flex;
            flex-direction: column;
            .delivery_personnel {
                margin-bottom: 20rpx;
                color: rgb(51, 51, 51);
                font-size: 28rpx;
                font-weight: 500;
            }
            .pickup_code {
                margin-bottom: 50rpx;
            }
        }
    }
}
</style>
